<template>
	<div class="information-header-wrap" v-if="banner">
		<a class="return-top" :class="{'show':topShow}" href="javascript:;" @click="backToTop(4)"></a>
		<div class="information-header-inner-wrap">
			<div class="information-header-nav-wrap fix">
				<a href="/" class="logo" target="_blank" title="微观财经首页">微观财经</a>
				<div style="float: left;margin-left: 190px;" v-if="showTab" class="information-header-nav-box">
					<em class="slide-em"></em>
					<ul class="information-header-nav-ul follow-top-nav"  >
						<li :class="{'active':activeIndex == 0}" title="热门" @click="tabChange(0)" >热门</li>	
						<li :class="{'active':activeIndex == 1}" title="我的关注" @click="tabChange(1)">关注</li>
					</ul>	
				</div>

				<ul class="information-header-nav-ul" v-show="isPc">
					<li class="login-li" v-if="!userName" title="点我微信登录" @click="wxLogin">
						<div class="login-wrap">
							<i class="information-header-icon login-icon"></i>
							登录
						</div>
					</li>
					<li class="login-li no-hover" v-else>
						<div class="has-login-wrap">
							<img :src="avatar" alt="" class="login-avatar"/>
							{{userName}}
							<span>|</span>
							<a href="javascript:;" class="loginout-a" @click="loginOut()" title="退出登录">退出</a>
						</div>
					</li>
				</ul>
				<ul class="information-header-nav-ul" v-show="isPc">
					<li class="information-header-nav-li qrcode-li" @mouseout="qrcodeShow = false;" @mouseover="qrcodeShow = true;">
						<i class="information-header-icon qrcode-icon"></i>
						扫码下载APP
						<qrcode :show-tips="false" :qrcode-show="qrcodeShow"></qrcode>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	import qrcode from '../qrcode/qrcode'
	import bus from '../../assets/js/eventBus'
	import {mapGetters} from 'vuex'
	import {getCookie,removeCookie,IsPC} from 'util/util'
	export default{
		name:'info-header',
		data(){
			return{
				hasLogin:false,
				qrcodeShow:false,
				qrcodeShowLogin:false,
				topShow:false,
				isPc:true,
				activeIndex:0,
				showTab:true
			}
		},
		computed:{
			...mapGetters([
          'userName',
          'userId',
          'avatar',
          'banner'
        ])
		},
		methods:{
			wxLogin(){
//				var newWindow = window.open('','wxLogin');
//				this.http.get("http://login.1234tv.com/v1/users/wxLogin?device=pc&service=" + encodeURIComponent("http://"+document.location.host+"?type=login")).then((res)=>{
//					if(res.status === 200){
//						newWindow.location.href = res.data;
//					}
//				});
			},
			backToTop(rate){
				var doc = document.body.scrollTop ? document.body : document.documentElement;
				var scrollTop = doc.scrollTop;

				var top = function() {
					scrollTop = scrollTop + (0 - scrollTop) / (rate || 2);

					if(scrollTop < 1) {
						doc.scrollTop = 0;
						return;
					}
					doc.scrollTop = scrollTop;
					requestAnimationFrame(top);
				};
				top();
			},
			loginOut(){
				removeCookie('UNION_TOKEN');
				location.reload();
			},
			tabChange(index){
				if(index){
					if(getCookie('UNION_TOKEN') && getCookie('UNION_TOKEN')!=''){
						this.activeIndex = index;
					}else{
						this.activeIndex = 0;
					}
				}else{
					this.activeIndex = index;	
				}
				console.log(index)
				bus.$emit("tabChange",index);
				this.$nextTick(function(){
					$(".information-header-nav-box em").animate({
						left:$('.information-header-nav-box li.active').offset().left-$('.information-header-nav-box li').eq(0).offset().left,
					},200)
				})
			}
		},
		beforeMount(){
			if(getCookie('UNION_TOKEN') != null && getCookie('UNION_TOKEN')!=''){
				this.$store.dispatch('getUserInfo')
			}
		},
		mounted(){
			let that = this,t = null;
			that.isPc = IsPC();
			$(window).on("scroll",function(){
				let top = $(window).scrollTop();
				let height = $(window).height();
				if(top >= height){
					that.topShow = true;
				}else{
					that.topShow = false
				}
			});
			if(this.$route.params.uuid){
				this.showTab = false;
			}	
		},
		components:{
			qrcode
		}
	}
</script>

<style scoped>
	.information-header-wrap{position: fixed;top: 0;left: 0;right: 0;background-color: #fff;border-bottom: 1px solid #dadada;z-index: 3;-webkit-transform: translateZ(0);transform: translateZ(0);}
	.information-header-inner-wrap{width: 1110px;height:55px;line-height:55px;margin:auto;}
	.information-header-nav-wrap{position:relative;margin: auto;height: 100%;}
	.information-header-nav-ul{float: right;font-size: 0;}
	.information-header-nav-ul li{position:relative;display: inline-block;height: 52px;padding:0 10px;line-height: 52px;border-bottom:3px solid transparent;font-size: 14px;font-family:"Microsoft YaHei";color: rgb(57,74,88);vertical-align:top;cursor: pointer;transition: border-bottom-color .4s,color .4s;letter-spacing: .2em;}
	.information-header-nav-ul li:hover{border-bottom-color:#3498d8;}
	.information-header-nav-ul li a{transition: color .3s;}
	.information-header-nav-ul li a:hover{color: #3498d8;}
	.information-header-nav-ul li.login-li.no-hover{cursor: default;}
	.information-header-nav-ul li.login-li.no-hover:hover{border-bottom-color:transparent;}
	.follow-top-nav li{width:80px;height:55px;font-size: 18px;color: rgb(55,74,129);text-align: center;-webkit-box-sizing:border-box;box-sizing:border-box;font-weight: 600;}
	.follow-top-nav li.active{color:rgb(52,152,219);}
	.follow-top-nav li:hover{color:rgb(52,152,219);border-bottom-color: transparent;}
	.follow-top-nav li.active:hover{color:rgb(52,152,219);}
	.qrcode{position: absolute;left: -54px;top: 72px;z-index: 1;}
	.qrcode-li >>> .qrcode{position: absolute;left: -16px;top: 72px;}
	.information-header-icon{display:inline-block;width: 23px;height: 24px;vertical-align: -6px;margin-right: 10px;}
	.qrcode-icon{background:url(../../assets/images/qrcode-icon.png);background-size: contain;}
	.login-icon{width:32px;height:32px;background:url(../../assets/images/login-icon.png);background-size: contain;vertical-align: -10px;}
	.login-avatar{display: inline-block;margin-right:6px;vertical-align: -15px;width: 40px;height: 40px;border-radius: 50%;}
	.return-top{position: fixed;background: url(../../assets/images/top.png) no-repeat;top: 80vh;right: 50%;margin-right:-500px;width: 42px;height: 45px;text-indent: -99999px;z-index: 1;-webkit-transition: opacity .25s,visibility .25s;transition: opacity .25s,visibility .25s;visibility: hidden;opacity: 0;}
	.return-top.show{visibility: visible;opacity: 1;}
	.logo{position: absolute;width: 151px;top: 0;bottom: 0;left: 10px;background: url(../../assets/images/logo.png) center no-repeat;background-size:100% 45px;text-indent: -999px;}
	.slide-em{position: absolute;bottom:0;width: 80px;border-top:3px solid  #3498d8;}
	.information-header-nav-box{position: relative;}
</style>